<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>

	<style>


	/* 根据盒子模型，浮动只在父元素的文字内容内浮动，不会超过 border，padding */
		.father {
			width: 500px;
			height: 500px;
			background-color: orange;

			border:20px solid red;
			padding: 20px;
		}

		.son {
			float: right;
			width: 200px;
			height: 200px;
			background-color: purple;
		}


		.pp {
			width: 500px;
			height: 500px;
			background-color: green;
		}

		/* 如果laoda(标准流) 不浮动，老二浮动，老二并不会浮在老大的上面，而是在老大的下面浮动
		也就是说，浮动只会影响到 它一起的，或者后面的标准流盒子	
		 */
		
		.laoda {
			width: 200px;
			height: 200px;
			background-color: black;
		}

		.laoer {
			width: 300px;
			height: 200px;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
	<P>&nbsp;</P>
	<div class="pp">
		<div class="laoda"></div>
		<div class="laoer"></div>
	</div>
</body>
</html>